<template>
  <div
    id="cesiumContainer"
    ref="cesiumContainer"
  ></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import './Widgets/widgets.css';
import { onMounted } from 'vue';

// 设置cesium token
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MmE4NGIxYi0xODY1LTQ5ZDEtODRkZi1jMDE4NDA0YTM3MWQiLCJpZCI6MjI2NDA2LCJpYXQiOjE3MjAwODg4NzZ9.EBKimXGOflvb9c_IBerc9T3knO7XZvUt-RffbhKELVE';
// 设置cesium静态资源路径
window.CESIUM_BASE_URL = '/';
// 设置相机默认视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5,
  20.4,
  110.4,
  61.2
);

onMounted(() => {
  var viewer = new Cesium.Viewer('cesiumContainer', {});

  // 隐藏cesium logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  //##1 setView直接到达该视角
  // // 1、将经纬度坐标（以度为单位）转换为Cesium中的三维笛卡尔坐标（Cartesian3）
  // var position = Cesium.Cartesian3.fromDegrees(116.397428, 39.90923, 100);
  // // 2、 setView设置相机位置，到达指定位置、视角
  // viewer.camera.setView({
  //   destination: position, // 相机位置
  //   orientation: {
  //     // 相机视角
  //     heading: Cesium.Math.toRadians(0),
  //     pitch: Cesium.Math.toRadians(-90),
  //     roll: 0,
  //   },
  // });

  // ##2 flyto
  var position = Cesium.Cartesian3.fromDegrees(116.397428, 39.90923, 100);
  viewer.camera.flyTo({
    destination: position, // 相机位置
    orientation: {
      // 相机视角
      heading: Cesium.Math.toRadians(0), // 相机的水平旋转角度（以弧度为单位），0 表示正北。
      pitch: Cesium.Math.toRadians(-90), // 相机的俯仰角度（以弧度为单位），-90 表示垂直向下。
      roll: 0, // 相机的翻滚角度（以弧度为单位），通常为 0。
    },
  });

  // ##3 通过键盘移动相机
  document.addEventListener('keydown', (e) => {
    var height = viewer.camera.positionCartographic.height;
    var moveRate = height / 100;
    if (e.key == 'w') {
      viewer.camera.moveForward(moveRate); // 点击w相机向前
    } else if (e.key == 's') {
      viewer.camera.moveBackward(moveRate);
    } else if (e.key == 'a') {
      viewer.camera.moveLeft(moveRate);
    } else if (e.key == 'd') {
      viewer.camera.moveRight(moveRate);
    } else if (e.key == 'q') {
      viewer.camera.lookLeft(Cesium.Math.toRadians(0.1)); // 向左旋转
    } else if (e.key == 'e') {
      viewer.camera.lookRight(Cesium.Math.toRadians(0.1));
    } else if (e.key == 'g') {
      viewer.camera.twistLeft(Cesium.Math.toRadians(0.1)); // 向逆时针翻转
    } else if (e.key == 'h') {
      viewer.camera.twistRight(Cesium.Math.toRadians(0.1));
    }
  });
});
</script>

<style></style>
